<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>好啊别管</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jqtimes.js"></script>
    <script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>


</head>

<body>
    <img id="sort_grid_pic" alt="" height="300" src="" />
    <div class="grid-panel" style="width: 100%;height: 100%">
        <table id="dg"></table>
    </div>


    <script>

        function reflsh(datajson) {
            $('#dg').datagrid({
                columns: [[
                    { field: 'code', title: '代码/名称', align: 'left', width: '80' },
                    {
                        field: 'increase', title: '涨幅', align: 'left',
                        styler: function (value, row, index) {
                            if (value > 7) {
                                return 'color:red;';
                            }
                        }
                    },
                    {
                        field: 'risingSpeed', title: '涨速', align: 'left',
                        styler: function (value, row, index) {
                            if (value > 2) {
                                return 'color:red;';
                            }
                        }
                    },
                    { field: 'conceptall', title: '概念', align: 'left' },
                    {
                        field: 'circulationValue', title: '流通值', align: 'left',
                        styler: function (value, row, index) {
                            if (value > 150) {
                                return 'background-color:#b671a7;color:red;';
                            }
                        }
                    }
                ]],
                striped: true,
                nowrap: false,
                data: datajson
            });
        }



        var socket = io.connect('ws://axiba.idnmd.top:8601', {
            query: {
                secret_key: 'asd'
            }
        });


        //接受图片
        socket.on('img_update', function (data) {
            $('#sort_grid_pic').attr('src', data);
            //console.log(data);

        });
        //接受数据
        socket.on('data_update', function (data) {
            reflsh(data)
            //console.log(data);
        });

        socket.onopen = function (event) {
            console.log("WebSocket connected");
        };

        socket.onmessage = function (event) {
            var message = event.data;
            console.log("Received message: " + message);
        };

        socket.onclose = function (event) {
            console.log("WebSocket disconnected");
        };

        function sendMessage() {
            var message = document.getElementById("message").value;
            socket.send(message);
        }

    </script>
</body>

<style>
    .grid-panel .datagrid-btable tr {
        height: 60px;
    }
</style>

</html>